import {useState, useEffect, useCallback, useRef} from 'react'
import {Layout, Menu, Input, Avatar, Icon, Dropdown, Modal, Button, Form, Checkbox} from 'antd';
import Link from 'next/link'

const {Header} = Layout;
import Search from './Search';
import Register from './Register';
import Login from './Login';

const menu = (
    <Menu>
        <Menu.Item>
            <Link href={`/detail/ArticleEditor`}>
                <a rel="noopener noreferrer">
                    编辑文章
                </a>
            </Link>
            <Link href={`/detail/User`}>
                <a rel="noopener noreferrer">
                    个人中心
                </a>
            </Link>
        </Menu.Item>
    </Menu>
);

export default ({children, renderer = <div/>}) => {
    const [token, setToken] = useState('')
    useEffect(() => {
        let token = localStorage.getItem("dake-token");
        setToken(token)
    }, [])
    return (
        <>
            <div>
                <Header>
                    <div style={{width: '70%', margin: 'auto', overflow: 'hidden'}}>
                        <div className="lf">
                            {/*<div className="logo"/>*/}
                            {/*<Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']}>*/}
                            {/*<Menu.Item key="1">nav 1</Menu.Item>*/}
                            {/*<Menu.Item key="2">nav 2</Menu.Item>*/}
                            {/*<Menu.Item key="3">nav 3</Menu.Item>*/}
                            {/*</Menu>*/}
                            {/*<Search/>*/}
                            {/*<Input.Search size="large" placeholder="input here" enterButton />*/}
                        </div>
                        <div className="rf">
                            <div hidden={token == ''}>
                            <Dropdown overlay={menu}>
                                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                    <div className="avatar">
                                        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                                style={{marginRight: 5}}/>
                                        <span>LeeYa Master</span>
                                    </div>
                                </a>
                            </Dropdown>
                            </div>
                            <div hidden={token != ''}><Login setToken={setToken}/><Register/></div>
                        </div>
                    </div>
                </Header>
                <style jsx>
                    {`
                    .site-layout-content {
                        min-height: 280px;
                        padding: 24px;
                        background: #fff;

                    }
                    #components-layout-demo-top .logo {
                        float: left;
                        width: 120px;
                        height: 31px;
                        margin: 16px 24px 16px 0;
                        background: rgba(255, 255, 255, 0.3);
                    }
                    .ant-row-rtl #components-layout-demo-top .logo {
                        float: right;
                        margin: 16px 0 16px 24px;
                    }
                    .ant-layout-header{
                        background-color: #fff !important;
                    }
                    .lf{
                        float: left;
                    }
                    .rf{
                        float: right;
                        display: flex;
                        align-items: center;
                    }
                    .avatar{
                        display: flex;
                        align-items: center;
                    }
                  `}
                </style>
            </div>
        </>
    )
}